<template>
<div class="root">

  <!-- 返回 -->
  <div class="top">
    <div @click="ret" style="display: flex;cursor:pointer;">
      <el-icon class="el-icon"><Back /></el-icon>
      <p class="bake">返回</p>
    </div>
    <span> | </span>
    <div class="name">数据分析:未定义</div>
  </div>
  <div class="content">
      <p>总分：</p>
      <span> | </span>
      <p>通过分数：</p>
      <span> | </span>
      <p>考试时长:0分钟</p>
      <span> | </span>
      <p>考试时间：时间不限</p>
  </div>
  <div class="exchars">
    <!-- 饼状图标 -->
    <div ref="cake" class="cake">
      
    </div>
    <!-- 柱状图标 -->
    <div ref="postzi" class="postzi">

    </div>
  </div>
  <!-- 学员统计 -->
  <div class="classbox">
    <p>学员统计</p>
    <div class="title">
      <div class="submit">
        <el-form :inline="true" :model="obj" class="demo-form-inline">
        <!-- 查询input输入框 -->
        <el-form-item label="学员姓名">
          <el-input v-model="obj.key" placeholder="考试名称" />
        </el-form-item>
        <!-- 查询选择部门 -->
        <el-form-item label="部门">
          <el-cascader :change-on-select="true" @change="getdepid" :props="defaultParams" :options="options" v-model="selectedOptions" :clearable="true" ref="id"></el-cascader>
        </el-form-item>
        <!-- 选择班级 -->
        <el-form-item label="班级">
            <el-select v-model="obj.class" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <!-- 选择状态 -->
        <el-form-item label="状态" style="width:170px">
          <el-select v-model="obj.status" placeholder="请选择" >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" plain>导出</el-button>
        </el-form-item>
      </el-form>
      </div>
    </div>
  </div>

</div>
</template>

<script setup lang='ts'>
import { Back } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';
import route from '../../router/router'
import {ref,reactive,onMounted } from 'vue'
import * as echarts from 'echarts';//echarts图表
import http from '../../api/class'
import {analysislist} from '../../api/test'
// 返回
const ret = () => {
  route.push({ path: './test' });
};

const routes:any=useRoute()
const query:any=JSON.parse(routes.query.params)
const form =reactive({
  id:query.id
})
// console.log(form);
// echarts图表
const cake = ref() // 使用ref创建虚拟DOM引用，使用时用main.value  饼状
const postzi=ref()// 使用ref创建虚拟DOM引用，使用时用main.value   柱状
onMounted(
  () => {
    init(),
    info1()
  }
)
function init() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(cake.value);
  var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: '通过' },
        { value: 580, name: 'Email' },
        { value: 484, name: '未通过' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

option && myChart.setOption(option);
}
// 图表配置
const option = {
  xAxis: {
    data: ['30分以下', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90',"90以上"]
  },
  yAxis: {},
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130,123],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};
// 柱状
function info1(){
  var myChart = echarts.init(postzi.value);
   myChart.setOption(option);
}
// 获取部门id
const getdepid=(val:any)=>{
  obj.depid=val[val.length-1]
}
const selectedOptions:any=ref([])
const defaultParams:any=ref({
        label: 'name',
        value: 'id',
        children: 'children'
})
const options = ref([])
// 获取部门级联选择器数据
let obj1=reactive({
  page:1,
  psize:5,
})
const departList=async()=>{
  let res:any=await http.departmentList(obj1)
  // console.log(res);
  options.value = res.data.list 
}
departList()
// 查询
let obj=reactive({
  page:1,
  psize:5,
  key:"",
  depid:0,
  class:"",
  status:""
})
const onSubmit = () => {
  
};
// 获取考试列表
let  list=async()=>{
  let res=await analysislist({testid :form.id})
  console.log(res,111);
}
list()
</script>

<style scoped lang='less'>
.top{
  width: 230px;
  display: flex;
  justify-content: space-between;
}
.content{
  margin-top: 20px;
  width: 500px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.el-icon{
    margin-top: 3px;
    margin-right: 8px;
  }
  .cake{
    width: 100%;
    height: 340px;
  }
  .postzi{
    width: 100%;
    height: 340px;
  }
  .exchars{
    display: flex;
  }
  .title{
    border-top: 1px solid rgb(226, 231, 236);
  }
  .submit{
    margin-top:20px ;
    margin-left: 20px;
  }
  .classbox{
    p{
      margin-left: 20px;
      border-bottom:1px solid #2734f1 ;
      color: #2734f1;
      width: 70px;
    }
  }
</style>